@import '../../../../../common/_utils/style/mixins/mixins.scss';
@import '../../../../../common/_utils/style/theme/theme.scss';

@include b(pan) {
  $pan-prefix: &;

  min-width: 64px;
  min-height: 64px;
  max-width: 126px;
  max-height: 126px;
  border-radius: 100%;
  position: relative;
  background: $collapse-card-header-bg;
  box-shadow: 0px 3px 13px 0px $shadow-color;
  &.mapboxgl-ctrl {
    margin: 10px 0 0 0px !important;
  }
  #{$pan-prefix}__center, .#{$iconfont-class-prefix}-fullscreen {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }
  @include e(center icon) {
    transition: 0.5s;
    cursor: pointer;
  }

  @include e(center) {
    width: 51%;
    height: 51%;
    border: 2px solid $border-color-split;
    border-radius: 50%;
  }
  @include e(item) {
    &:hover {
      > div {
        background: $pan-item-hover-bg;
      }
      > i {
        color: $primary-color;
      }
    }
  }
  @include e(icon) {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip: rect(0px, 32px, 32px, 0);
    @include when(left) {
      transform: rotate(-45deg);
    }
    @include when(right) {
      transform: rotate(135deg);
    }
    @include when(top) {
      transform: rotate(45deg);
    }
    @include when(bottom) {
      transform: rotate(-135deg);
    }
  }
  .#{$iconfont-class-prefix}-solid-triangle {
    &-left, &-right, &-up, &-down {
      position: absolute;
      font-size: 12px;
      line-height: 1;
      transform: translate(-50%, -50%);
    }
    &-left, &-right {
      top: 50%;
    }
    &-up, &-down {
      left: 50%;
    }
    &-left {
      left: 13%;
    }
    &-right {
      left: 86%;
    }
    &-up {
      top: 13%;
    }
    &-down {
      top: 86%;
    }
  }
}
